<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>忘记密码</title>  
    <style>
        body {  
    font-family: Arial, sans-serif;  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    height: 100vh;  
    background-color: #f4f4f4;  
}  
  
.container {  
    background: white;  
    padding: 20px;  
    border-radius: 8px;  
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
    width: 300px;  
    text-align: center;  
}  
  
.form-group {  
    margin-bottom: 15px;  
}  
  
.form-group label {  
    display: block;  
    margin-bottom: 5px;  
}  
  
.form-group input {  
    width: 100%;  
    padding: 8px;  
    box-sizing: border-box;  
    border: 1px solid #ccc;  
    border-radius: 4px;  
}  
  
button {  
    width: 100%;  
    padding: 10px;  
    background-color: #007BFF;  
    color: white;  
    border: none;  
    border-radius: 4px;  
    cursor: pointer;  
}  
  
button:hover {  
    background-color: #0056b3;  
}
    </style>
</head>  
<body>  
    <div class="container">  
        <h2>修改密码</h2>  
        <form id="forgetPasswordForm">  
            <div class="form-group">  
                 
                <input type="stuID" id="stuID" name="stuID"  placeholder="请输入学号" required>  <br><br>
                <input type="password" id="password" name="email1"  placeholder="请输入密码" required>  <br><br>
                <input type="password" id="email1" name="email1"  placeholder="请输入修改密码" required>  <br><br>
                <input type="password" id="email2" name="email2"  placeholder="再次输入修改密码" required> <br><br>
                
            </div>  
            <button type="submit">确认</button>  
        </form>    
    </div>  
  
    <script >
        document.getElementById('forgetPasswordForm').addEventListener('submit', function(event) {  
    event.preventDefault(); // 阻止表单的默认提交行为  
            var username = document.getElementById("stuID").value;
            var password = document.getElementById("password").value; 
            var email1 = document.getElementById('email1').value;  
            var email2 = document.getElementById('email2').value;
   // 这里可以添加更复杂的验证逻辑  
   if (username.length!==5) {  
        alert('请输入正确的学号！');  
        return;  
    }  
    if (email1 !== email2) {  
        alert('两次输入的密码不相同！');  
        return;  
    }  
    fetch('/change', {  
        method: 'POST',   
        headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
        body: new URLSearchParams({ username: username, password: password, email1:email1 }).toString(),  
    })  
    .then(response => {  
        if (!response.ok) {  
            
            throw new Error('网络响应错误: ' + response.statusText);  
        }  
        return response.json(); // 解析JSON响应  
    })  
    .then(data => {  
        console.log(data);  
        if (data.message == "OK") {
            alert("修改成功！");
            window.location.href='/login';
        }
        else if (data.message == "Wrong Password") {
            alert("用户名或密码错误！");
            location.reload();
        }
            
    })  

    .catch(error => {    
        console.error('请求失败:', error); 
       
});
        });
    </script>  
</body>  
</html>